<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费用计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .calculator-button {
            transition: all 0.2s ease;
        }
        .calculator-button:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-500 to-indigo-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">费用计算器</h1>
                <i class="fas fa-history text-lg"></i>
            </div>
        </div>

        <!-- Calculator Type Selection -->
        <div class="px-4 py-3 bg-white border-b border-gray-200">
            <div class="flex space-x-2 overflow-x-auto">
                <button onclick="switchCalculator('commission')" id="commission-tab" class="calculator-button bg-purple-500 text-white text-xs px-4 py-2 rounded-lg whitespace-nowrap">
                    平台佣金
                </button>
                <button onclick="switchCalculator('logistics')" id="logistics-tab" class="calculator-button bg-gray-100 text-gray-600 text-xs px-4 py-2 rounded-lg whitespace-nowrap">
                    物流费用
                </button>
                <button onclick="switchCalculator('marketing')" id="marketing-tab" class="calculator-button bg-gray-100 text-gray-600 text-xs px-4 py-2 rounded-lg whitespace-nowrap">
                    营销成本
                </button>
                <button onclick="switchCalculator('profit')" id="profit-tab" class="calculator-button bg-gray-100 text-gray-600 text-xs px-4 py-2 rounded-lg whitespace-nowrap">
                    利润计算
                </button>
            </div>
        </div>

        <!-- Calculator Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Commission Calculator -->
            <div id="commission-calculator" class="calculator-content">
                <div class="p-4">
                    <div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-4 border border-purple-200 mb-4">
                        <h3 class="font-semibold mb-3 flex items-center">
                            <i class="fas fa-percentage text-purple-600 mr-2"></i>
                            平台佣金计算
                        </h3>
                        
                        <div class="space-y-4">
                            <!-- 销售额输入 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">销售额 (元)</label>
                                <input type="number" id="salesAmount" placeholder="请输入销售额" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                       oninput="calculateCommission()">
                            </div>

                            <!-- 佣金率选择 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">佣金率</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <button onclick="setCommissionRate(0.02)" class="commission-rate-btn bg-purple-100 text-purple-700 text-sm py-2 rounded-lg border border-purple-200">
                                        2% (数码类)
                                    </button>
                                    <button onclick="setCommissionRate(0.03)" class="commission-rate-btn bg-purple-500 text-white text-sm py-2 rounded-lg">
                                        3% (服装类)
                                    </button>
                                    <button onclick="setCommissionRate(0.05)" class="commission-rate-btn bg-purple-100 text-purple-700 text-sm py-2 rounded-lg border border-purple-200">
                                        5% (美妆类)
                                    </button>
                                </div>
                                <input type="range" id="commissionRate" min="0.01" max="0.1" step="0.001" value="0.03" 
                                       class="w-full mt-2" oninput="updateCommissionRate()">
                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                    <span>1%</span>
                                    <span id="currentRate">3%</span>
                                    <span>10%</span>
                                </div>
                            </div>

                            <!-- 计算结果 -->
                            <div class="bg-white rounded-lg p-4 border border-gray-200">
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="text-center">
                                        <p class="text-xs text-gray-600">平台佣金</p>
                                        <p id="commissionAmount" class="text-xl font-bold text-red-600">¥0</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-xs text-gray-600">实际收入</p>
                                        <p id="actualIncome" class="text-xl font-bold text-green-600">¥0</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 佣金说明 -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <h4 class="text-sm font-medium text-yellow-800 mb-2">佣金说明</h4>
                        <div class="text-xs text-yellow-700 space-y-1">
                            <p>• 数码3C类: 2-3%</p>
                            <p>• 服装鞋包: 3-4%</p>
                            <p>• 美妆个护: 4-5%</p>
                            <p>• 家居用品: 2.5-3.5%</p>
                            <p>• 食品饮料: 3-6%</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logistics Calculator -->
            <div id="logistics-calculator" class="calculator-content hidden">
                <div class="p-4">
                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-200 mb-4">
                        <h3 class="font-semibold mb-3 flex items-center">
                            <i class="fas fa-truck text-blue-600 mr-2"></i>
                            物流费用计算
                        </h3>
                        
                        <div class="space-y-4">
                            <!-- 重量输入 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">包裹重量 (kg)</label>
                                <input type="number" id="packageWeight" placeholder="请输入重量" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       oninput="calculateLogistics()">
                            </div>

                            <!-- 配送距离 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">配送距离</label>
                                <select id="deliveryDistance" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" onchange="calculateLogistics()">
                                    <option value="">请选择配送距离</option>
                                    <option value="local">同城配送</option>
                                    <option value="regional">省内配送</option>
                                    <option value="national">全国配送</option>
                                </select>
                            </div>

                            <!-- 快递公司 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">快递公司</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <button onclick="selectCourier('sf')" class="courier-btn bg-blue-100 text-blue-700 text-sm py-2 rounded-lg border border-blue-200">
                                        顺丰快递
                                    </button>
                                    <button onclick="selectCourier('yt')" class="courier-btn bg-blue-500 text-white text-sm py-2 rounded-lg">
                                        圆通快递
                                    </button>
                                    <button onclick="selectCourier('zt')" class="courier-btn bg-blue-100 text-blue-700 text-sm py-2 rounded-lg border border-blue-200">
                                        中通快递
                                    </button>
                                    <button onclick="selectCourier('sto')" class="courier-btn bg-blue-100 text-blue-700 text-sm py-2 rounded-lg border border-blue-200">
                                        申通快递
                                    </button>
                                </div>
                            </div>

                            <!-- 计算结果 -->
                            <div class="bg-white rounded-lg p-4 border border-gray-200">
                                <div class="text-center">
                                    <p class="text-xs text-gray-600">预估物流费用</p>
                                    <p id="logisticsFee" class="text-2xl font-bold text-blue-600">¥0</p>
                                    <p class="text-xs text-gray-500 mt-1">包含包装费、燃油附加费等</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profit Calculator -->
            <div id="profit-calculator" class="calculator-content hidden">
                <div class="p-4">
                    <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 border border-green-200 mb-4">
                        <h3 class="font-semibold mb-3 flex items-center">
                            <i class="fas fa-chart-line text-green-600 mr-2"></i>
                            利润计算器
                        </h3>
                        
                        <div class="space-y-4">
                            <!-- 成本输入 -->
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">商品成本</label>
                                    <input type="number" id="productCost" placeholder="0.00" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           oninput="calculateProfit()">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">销售价格</label>
                                    <input type="number" id="salePrice" placeholder="0.00" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           oninput="calculateProfit()">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">物流费用</label>
                                    <input type="number" id="shippingCost" placeholder="0.00" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           oninput="calculateProfit()">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">营销成本</label>
                                    <input type="number" id="marketingCost" placeholder="0.00" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           oninput="calculateProfit()">
                                </div>
                            </div>

                            <!-- 利润分析 -->
                            <div class="bg-white rounded-lg p-4 border border-gray-200">
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-600">销售收入</span>
                                        <span id="totalRevenue" class="text-sm font-medium">¥0</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-600">总成本</span>
                                        <span id="totalCost" class="text-sm font-medium text-red-600">¥0</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-600">平台佣金 (3%)</span>
                                        <span id="platformFee" class="text-sm font-medium text-red-600">¥0</span>
                                    </div>
                                    <hr class="border-gray-200">
                                    <div class="flex justify-between">
                                        <span class="text-sm font-medium text-gray-800">净利润</span>
                                        <span id="netProfit" class="text-lg font-bold text-green-600">¥0</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-600">利润率</span>
                                        <span id="profitMargin" class="text-sm font-medium">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentCommissionRate = 0.03;
        let selectedCourier = 'yt';

        function switchCalculator(type) {
            // 隐藏所有计算器
            document.querySelectorAll('.calculator-content').forEach(content => {
                content.classList.add('hidden');
            });
            
            // 重置所有标签样式
            document.querySelectorAll('.calculator-button').forEach(btn => {
                btn.classList.remove('bg-purple-500', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // 显示选中的计算器
            document.getElementById(type + '-calculator').classList.remove('hidden');
            document.getElementById(type + '-tab').classList.remove('bg-gray-100', 'text-gray-600');
            document.getElementById(type + '-tab').classList.add('bg-purple-500', 'text-white');
        }

        function calculateCommission() {
            const salesAmount = parseFloat(document.getElementById('salesAmount').value) || 0;
            const commission = salesAmount * currentCommissionRate;
            const actualIncome = salesAmount - commission;
            
            document.getElementById('commissionAmount').textContent = '¥' + commission.toFixed(2);
            document.getElementById('actualIncome').textContent = '¥' + actualIncome.toFixed(2);
        }

        function setCommissionRate(rate) {
            currentCommissionRate = rate;
            document.getElementById('commissionRate').value = rate;
            document.getElementById('currentRate').textContent = (rate * 100).toFixed(1) + '%';
            
            // 更新按钮状态
            document.querySelectorAll('.commission-rate-btn').forEach(btn => {
                btn.classList.remove('bg-purple-500', 'text-white');
                btn.classList.add('bg-purple-100', 'text-purple-700', 'border', 'border-purple-200');
            });
            
            event.target.classList.remove('bg-purple-100', 'text-purple-700', 'border', 'border-purple-200');
            event.target.classList.add('bg-purple-500', 'text-white');
            
            calculateCommission();
        }

        function updateCommissionRate() {
            const rate = parseFloat(document.getElementById('commissionRate').value);
            currentCommissionRate = rate;
            document.getElementById('currentRate').textContent = (rate * 100).toFixed(1) + '%';
            calculateCommission();
        }

        function calculateLogistics() {
            const weight = parseFloat(document.getElementById('packageWeight').value) || 0;
            const distance = document.getElementById('deliveryDistance').value;
            
            if (weight > 0 && distance) {
                let baseFee = 0;
                let perKgFee = 0;
                
                // 根据快递公司和距离计算费用
                if (selectedCourier === 'sf') {
                    baseFee = distance === 'local' ? 12 : distance === 'regional' ? 15 : 20;
                    perKgFee = distance === 'local' ? 2 : distance === 'regional' ? 3 : 5;
                } else {
                    baseFee = distance === 'local' ? 8 : distance === 'regional' ? 10 : 12;
                    perKgFee = distance === 'local' ? 1.5 : distance === 'regional' ? 2 : 3;
                }
                
                const totalFee = baseFee + (weight > 1 ? (weight - 1) * perKgFee : 0);
                document.getElementById('logisticsFee').textContent = '¥' + totalFee.toFixed(2);
            }
        }

        function selectCourier(courier) {
            selectedCourier = courier;
            
            // 更新按钮状态
            document.querySelectorAll('.courier-btn').forEach(btn => {
                btn.classList.remove('bg-blue-500', 'text-white');
                btn.classList.add('bg-blue-100', 'text-blue-700', 'border', 'border-blue-200');
            });
            
            event.target.classList.remove('bg-blue-100', 'text-blue-700', 'border', 'border-blue-200');
            event.target.classList.add('bg-blue-500', 'text-white');
            
            calculateLogistics();
        }

        function calculateProfit() {
            const productCost = parseFloat(document.getElementById('productCost').value) || 0;
            const salePrice = parseFloat(document.getElementById('salePrice').value) || 0;
            const shippingCost = parseFloat(document.getElementById('shippingCost').value) || 0;
            const marketingCost = parseFloat(document.getElementById('marketingCost').value) || 0;
            
            const totalCost = productCost + shippingCost + marketingCost;
            const platformFee = salePrice * 0.03; // 3% 平台佣金
            const netProfit = salePrice - totalCost - platformFee;
            const profitMargin = salePrice > 0 ? (netProfit / salePrice * 100) : 0;
            
            document.getElementById('totalRevenue').textContent = '¥' + salePrice.toFixed(2);
            document.getElementById('totalCost').textContent = '¥' + totalCost.toFixed(2);
            document.getElementById('platformFee').textContent = '¥' + platformFee.toFixed(2);
            document.getElementById('netProfit').textContent = '¥' + netProfit.toFixed(2);
            document.getElementById('profitMargin').textContent = profitMargin.toFixed(1) + '%';
        }
    </script>
</body>
</html>